<template>
  <div id="oil-wear">
    <span v-show="isShowHint">暂无数据</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      deviceName: ['已检定设备', '未检定设备'],
      deviceData: [],
      isShowHint: false
    };
  },

  methods: {
    getVerificationData(data) {
      if (data.length == 0) {
        this.isShowHint = true;
        return;
      } else {
        this.isShowHint = false;
      }
      this.deviceData = [
        { name: '已检定设备', value: data[0].verificationIn },
        { name: '未检定设备', value: data[0].verificationOf },
      ]
      this.initECharts();
    },

    initECharts() {
      var echarts = require('echarts');
      var myChart = echarts.init(document.querySelector('#oil-wear'));
      let option = {
        color: ['#34d77a', '#4993ea'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          padding: [8, 14],
          backgroundColor: "rgba(255 ,255 ,255 ,1)",
          borderColor: "#ffffff",
          borderWidth: "1",
          textStyle: {
            color: "#666666"
          },
          extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);",
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: this.deviceName
        },
        series: [{
          name: "设备检定情况",
          radius: ['48%', '65%'],
          center: ['55%', '58%'],
          type: 'pie',
          label: {
            normal: {
              show: true,
              formatter: '{b}: {@2012} ',
              textStyle: {
                fontSize: 13,
              },
              position: 'outside'
            },
            emphasis: {
              show: true
            }
          },
          // 引导线
          labelLine: {
            normal: {
              show: true,
              length: 6,
              length2: 14
            },
            emphasis: {
              show: true
            }
          },
          data: this.deviceData
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style  scoped>
#oil-wear {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #aaaaaa;
}
</style>
